<template>
  <el-container style="height: 100vh">
    <el-header height="auto" style="flex: 0 0 auto;padding-top: 10px;box-shadow: 0 0 15px #ccc;margin-bottom: 20px">
      <div style="display: flex;justify-content: space-around;align-items: center;margin-bottom: 10px">
        <el-steps :active="orderDetailsStore.order.status" align-center finish-status="success"
                  process-status="process" simple
                  style="width: 75%;background: #fff">
          <el-step v-for="item in status" :title="item.value"/>
        </el-steps>
      </div>
    </el-header>
    <el-main style="flex: 1 0 auto;">
      <el-card>
        <router-view #default="{Component,route}">
          <component :is="Component"/>
        </router-view>
      </el-card>
    </el-main>
    <Footer style="flex: 0 0 auto;"/>
  </el-container>
</template>
<script setup>
import {onMounted, onUnmounted, watch} from 'vue'
import Footer from '@/views/muteorder/components/footer.vue'
import {useRouter} from "vue-router"
import {useOrderDetailsStore} from "@/stores/order.js";
import {getOrderById} from "@/apis/order.js";

const router = useRouter()
const orderDetailsStore = useOrderDetailsStore()

const status = [
  {key: 1, value: "创建订单", type: "primary", router: "create"},
  {key: 2, value: "申请报价", type: "primary", router: "appquotation"},
  {key: 3, value: "报价完成", type: "success", router: "finishquotation"},
  {key: 4, value: "完成支付", type: "success", router: "pay"},
  {key: 5, value: "正在打印", type: "primary", router: "printing"},
  {key: 6, value: "打印完成", type: "success", router: "finishprint"},
  {key: 7, value: "订单完成", type: "success", router: "finishorder"},
]
watch(() => [orderDetailsStore.order.status, orderDetailsStore.order.cancel], val => {
  console.log("状态变化", "status:" + val[0], "cancel:" + val[1])
  if (!val[0]) router.push({name: "create"})
  else if (val[0] === 7) router.push({name: "finish"})
  else {
    if (val[1] === 0 || val[1] === 3) {
      router.push({name: status[val[0]].router})
    } else router.push({name: "cancel",})
  }
}, {immediate: true})
onMounted(() => {
  getOrderById(orderDetailsStore.order.id).then(({data}) => orderDetailsStore.order = data)
})
onUnmounted(() => {
  orderDetailsStore.order = {}
})
</script>

<style scoped>
.el-main {
  padding: 0 10%;
}

.el-header {
  padding: 0;
  background-color: #fff;
}
</style>